import type { Directive } from 'vue'
import { useUserStore } from '@/stores/user'

// 权限指令
export const permission: Directive = {
  mounted(el, binding) {
    const { value } = binding
    const userStore = useUserStore()
    
    if (value && value.length > 0) {
      const hasPermission = userStore.hasPermission(value)
      if (!hasPermission) {
        el.style.display = 'none'
        // 或者移除元素
        // el.parentNode?.removeChild(el)
      }
    }
  },
  
  updated(el, binding) {
    const { value } = binding
    const userStore = useUserStore()
    
    if (value && value.length > 0) {
      const hasPermission = userStore.hasPermission(value)
      if (!hasPermission) {
        el.style.display = 'none'
      } else {
        el.style.display = ''
      }
    }
  }
}
